<%--                                                                       --%>
<%-- Copyright (c) 2004-2005 BroadVision, Inc.  All rights reserved.       --%>
<%--                                                                       --%>
<%-- This software is copyrighted. Under the copyright laws, this software --%>
<%-- may not be copied, in whole or in part, without prior written consent --%>
<%-- of BroadVision, Inc. or its assignees. This software is provided      --%>
<%-- under the terms of a license between BroadVision and the recipient,   --%>
<%-- and its use is subject to the terms of that license.                  --%>
<%--                                                                       --%>
<%-- This software may be protected by one or more U.S. and International  --%>
<%-- patents.  Certain applications of BroadVision One-To-One software are --%>
<%-- covered by U.S. patent 5,710,887.                                     --%>
<%--                                                                       --%>
<%-- TRADEMARKS: BroadVision and BroadVision One-To-One are registered     --%>
<%-- trademarks of BroadVision, Inc., in the United States and the         --%>
<%-- European Community, and are trademarks of BroadVision, Inc., in other --%>
<%-- countries.  The BroadVision logo, is a trademark of BroadVision,      --%>
<%-- Inc., in the United States and other countries. Additionally, IONA    --%>
<%-- and Orbix are trademarks of IONA Technologies, Ltd.  RSA, MD5, and    --%>
<%-- RC2 are trademarks of RSA Data Security, Inc.                         --%>
<%--                                                                       --%>

<%@ taglib uri="/WEB-INF/c.tld" prefix="c" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>

<script language="JavaScript">

var lockIn = false;
var elementPath;
var element;
var NS, IE, N6;
var bg;
var lyr;
var col;
var current="";
var current_text="primarybackgroundColor";
	
if (document.all) {
  IE = true;
  elementPath = "document.all";
  element = "primary.style.backgroundColor";
}
else if (document.layers) {
  NS = true;
  elementPath = "document.container.document";
  element = "primary.document.bgColor";
}
else if (document.getElementById) {
  N6 = true;
  elementPath = "document";
  element = "getElementById('primary').style.backgroundColor";
}
else {
  alert("Unrecognized Browser Detected");
}

function updateColor(rgb) {
  bg = rgb;
  if (current_text == "primarybackgroundColor") {
    document.userTemplateColorsForm.primarybackgroundColor.value = bg;
  } else if (current_text == "primarycolor") {
    document.userTemplateColorsForm.primarycolor.value = bg;
  } else if (current_text == "secondarybackgroundColor") {
    document.userTemplateColorsForm.secondarybackgroundColor.value = bg;
  } else if (current_text == "secondarycolor") {
    document.userTemplateColorsForm.secondarycolor.value = bg;
  }

  if (element != "color1" && element != "color2") {
    eval(elementPath + "." + element + " = bg;")
  }
  else {
    if (element == "color1"){
      color = bg.substring(1,7);
      document.container.document.primary.document.open();
      document.container.document.primary.document.write('<font color=" + document.userTemplateColorsForm.primarycolor.value + " FACE="Arial" SIZE="-1"><b>sample text<\/B><\/font>');
      document.container.document.primary.document.close();
    } else {
      color = bg.substring(1,7);
      document.container.document.secondary.document.open();
      document.container.document.secondary.document.write('<font color=" + document.userTemplateColorsForm.secondarycolor.value + " FACE="Arial" SIZE="-1"><b>sample text<\/B><\/font>');
      document.container.document.secondary.document.close();
    }
  }
  return true;
}
	
function changeElement(id1, id2) {
  current_text = id1 + id2;
  if (IE) {
    element = eval("\"" + id1 + ".style." + id2 + "\"");
  }
  else if (NS) {
    if (id2 == 'backgroundColor') {
      element = eval("\"" + id1 + ".document.bgColor\"");
    }
    else if (id1 == 'primary') {
      element = "color1"
    }
    else if (id1 == 'secondary') {
      element = "color2"
    }
  } else if (N6) {
    element = eval("\"getElementById('" + id1 + "').style." + id2 + "\"");
  }
}

function startOver() {
  if (document.userTemplateColorsForm.primarybackgroundColor.value == "" && 
      document.userTemplateColorsForm.primarycolor.value=="" &&
      document.userTemplateColorsForm.secondarybackgroundColor.value=="" &&
      document.userTemplateColorsForm.secondarycolor.value==""){
    return;
  }
  if (IE) {
    document.all.primary.style.backgroundColor = document.userTemplateColorsForm.primarybackgroundColor.value;
    document.all.primary.style.color = document.userTemplateColorsForm.primarycolor.value;
    document.all.secondary.style.backgroundColor = document.userTemplateColorsForm.secondarybackgroundColor.value;
    document.all.secondary.style.color = document.userTemplateColorsForm.secondarycolor.value;
  }
  else if (NS) {
    document.container.document.primary.document.bgColor = document.userTemplateColorsForm.primarybackgroundColor.value;
    document.container.document.primary.document.open();
    document.container.document.primary.document.write('<font color=" + document.userTemplateColorsForm.primarycolor.value + " FACE="Verdana, Geneva, Arial, Helvetica, Sans-Serif" SIZE="-2"><b>sample text<\/B><\/font>')
    document.container.document.primary.document.close();
    document.container.document.secondary.document.bgColor = document.userTemplateColorsForm.secondarybackgroundColor.value;
    document.container.document.secondary.document.open();
    document.container.document.secondary.document.write('<font color=" + document.userTemplateColorsForm.secondarycolor.value + " FACE="Verdana, Geneva, Arial, Helvetica, Sans-Serif" SIZE="-2"><b>sample text<\/B><\/font>')
    document.container.document.secondary.document.close();
  }
  else if (N6) {
    document.getElementById('primary').style.backgroundColor = document.userTemplateColorsForm.primarybackgroundColor.value;
    document.getElementById('primary').style.color = document.userTemplateColorsForm.primarycolor.value;
    document.getElementById('secondary').style.backgroundColor = document.userTemplateColorsForm.secondarybackgroundColor.value;
    document.getElementById('secondary').style.color = document.userTemplateColorsForm.secondarycolor.value;
  }
  lockIn = false;
  changeElement('primary','backgroundColor');
  current = document.userTemplateColorsForm.primarybackgroundColor.value;
}

function makeNum(str) {
  if((str >= 0) && (str <= 9)) return str;
  switch(str.toUpperCase()) {
    case "A": return 10;
    case "B": return 11;
    case "C": return 12;
    case "D": return 13;
    case "E": return 14;
    case "F": return 15;
    default:  return -1;
  }
}

function check_HEX_field(txtValue) {
  var strLength = txtValue.length;
  if (strLength == 0) return true;
  if (strLength != 7) return false;
  if (txtValue.substring(0, 1) != '#') return false;
  for (var i = 1; i < strLength; i++) {
    if (makeNum(txtValue.substring(i, i+1)) < 0) 
      return false;
  }
  return true;
}

function check_required_fields(){
  // check all the HEX color fields: primarybackgroundColor, primarycolor, secondarybackgroundColor, secondarycolor.
  if (!check_HEX_field(document.forms[0].primarybackgroundColor.value)) {
    alert("You must enter a valid Primary Color value.");
    return false;
  }
  if (!check_HEX_field(document.forms[0].primarycolor.value)) {
    alert("You must enter a valid Primary Text Color value.");
    return false;
  }
  if (!check_HEX_field(document.forms[0].secondarybackgroundColor.value)) {
    alert("You must enter a valid Secondary Color value.");
    return false;
  }
  if (!check_HEX_field(document.forms[0].secondarycolor.value)) {
    alert("You must enter a valid Secondary Text Color value.");
    return false;
  }
}

<!--
var action = true;
function display(name) {
  if (document.all) {
    var layerObj = eval("document.all." + name + ".style");
    var hide = "hidden";
    var show = "visible";
  }
  else {
    var layerObj = eval("document." + name);
    var hide = "hide";
    var show = "show";
  }
  layerObj.visibility = (action ?  hide : show);
  action = !action;
}
//-->

function doResetAction(form) {
  var ok = true; // confirm('<bean:message key="confirmReset" bundle="ep.messages"/>');
  if (ok && form != null) {
    form.action = "<c:url value="/ep/userTemplateColorsEdit.do"/>";
    form.submit();
  }
}

//
//
//
function doCancel(form) {
  form.action = "<c:url value="/ep/userTemplateColorsView.do"/>";
  form.submit();
}

</script>

<%
  String ctxPath = request.getContextPath();
%>

<c:set var="transparentImg">
<img src="<%= ctxPath %>/ep/images/build/transparent.gif" width="15" height="15" border="0" alt="<bean:message key="image.alt.edit" bundle="ep.messages"/>" title="<bean:message key="image.alt.edit" bundle="ep.messages"/>">
</c:set>

<html:form action="/ep/userTemplateColorsSave.do">
<input type="hidden" name="userTemplateId" value="<c:out value='${param.userTemplateId}'/>"/>
<input type="hidden" name="goBackAction"/>
<table class="zoneFive" width="100%" border="0" cellspacing="0" cellpadding="0" summary="content area">
  <tr>
    <td valign="top" width="100%">
      <div class="pageTitle">
        <bean:define id="tname" name="userTemplateColorsView" property="name" />
        <bean:message key="ep.user.template.edit.page.title" arg0="<%=(String)tname%>" bundle="ep.messages"/>
      </div>
      <div class="errorMessage"><html:errors bundle="ep.messages"/></div>
      <%@ include file="/mc/common/pagetab.jsp" %>
      <div class="pageSubtitle">
        <span class="left">
          <bean:message key="ep.user.template.information" bundle="ep.messages"/>
        </span>
      </div> 
      <table class="labelForm" width="100%" border="0" cellspacing="0" cellpadding="0" summary="<bean:message key='ep.page.types' bundle="ep.messages"/>">
        <tr> 
          <td class="label" width="30%">
          <table class="subLabel" width="100%" border="0" cellspacing="0" cellpadding="0" summary="<bean:message key='ep.page.types' bundle="ep.messages"/>">
          <tr>
            <td class="label" width="100%">
            <input type="radio" name="colorSelector" id="colorSelector" value="primarybackgroundColor" checked onclick="javascript:changeElement('primary', 'backgroundColor'); lockIn=false; current='';">
            <bean:message key="ep.user.template.colors.select.primary" bundle="ep.messages"/>
            </td>
          </tr>         
          <tr>
            <td class="labelField" width="100%">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<html:text name="userTemplateColorsForm" property="primarybackgroundColor" size="8" maxlength="7"/>
            </td>
          </tr>
          <tr> 
            <td class="label" width="100%">
              <input type="radio" name="colorSelector" id="colorSelector" value="primarycolor" onclick="javascript:changeElement('primary', 'color'); lockIn=false; current='';">
              <bean:message key="ep.user.template.colors.select.primary.text" bundle="ep.messages"/>
            </td>
          </tr>
          <tr>
            <td class="labelField" width="100%">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<html:text name="userTemplateColorsForm" property="primarycolor" size="8" maxlength="7"/>
            </td>
          </tr>
          <tr> 
            <td class="label" width="100%">
              <input type="radio" name="colorSelector" id="colorSelector" value="secondarybackgroundColor" onclick="javascript:changeElement('secondary', 'backgroundColor'); lockIn=false; current='';">
              <bean:message key="ep.user.template.colors.select.secondary" bundle="ep.messages"/>
            </td>
          </tr>
          <tr>
            <td class="labelField" width="100%">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<html:text name="userTemplateColorsForm" property="secondarybackgroundColor" size="8" maxlength="7"/>
            </td>
          </tr>
          <tr> 
            <td class="label" width="100%">
              <input type="radio" name="colorSelector" id="colorSelector" value="secondarycolor" onclick="javascript:changeElement('secondary', 'color'); lockIn=false; current='';">
              <bean:message key="ep.user.template.colors.select.secondary.text" bundle="ep.messages"/>
            </td>
          </tr>
          <tr>
            <td class="labelField" width="100%">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<html:text name="userTemplateColorsForm" property="secondarycolor" size="8" maxlength="7"/>
            </td>
          </tr>
          </table>
          </td> 
          <td class="label" width="20%">
          <script language="JavaScript">
          <!-- 
          var divs = '';
          if (document.layers) {
            divs += 
              '<ilayer id="container">' +
              '<div name="primary" id="primary" style="position:absolute; width : 100px; left:0; top:20; layer-background-color:#9999CC; color:#FFFFFF; font-size:9pt; font-family:verdana, san-serif; font-weight:bold; padding: 5px 5px 5px 5px;"><bean:message key="ep.user.template.colors.sampletext" bundle="ep.messages"/></div>' +
              '<br><br>' +
              '<div name="secondary" id="secondary" style="position:absolute; width : 100px; left:0; top:50; layer-background-color:#CCCCFF; color:#666699; font-size:9pt; font-family:verdana, san-serif; font-weight:bold; padding: 5px 5px 5px 5px;"><bean:message key="ep.user.template.colors.sampletext" bundle="ep.messages"/></div>'+
              '</ilayer>'
          }
          else {
            divs +=
              '<div id="MScontainer" style="position:relative">'+
              '<div name="primary" id="primary" style="position:absolute; width : 100px; left:0; top:20; background-color:#9999CC; color:#FFFFFF; font-size:8pt; font-family:verdana, san-serif; font-weight:bold; padding: 5px 5px 5px 5px;"><bean:message key="ep.user.template.colors.sampletext" bundle="ep.messages"/></div>'+
              '<br><br>' +
              '<div name="secondary" id="secondary" style="position:absolute; width : 100px; left:0; top:50; background-color:#CCCCFF; color:#666699; font-size:8pt; font-family:verdana, san-serif; font-weight:bold; padding: 5px 5px 5px 5px;"><bean:message key="ep.user.template.colors.sampletext" bundle="ep.messages"/></div>'+
              '</div>'
          }
          document.write(divs);
          //-->
          </script>
          </td>
          <td class="label" width="50%">
            <table class="subLabel" border="0" cellspacing="1" cellpadding="0">
              <tr>
                <td>
                  <div class="blockTitle">
                  <span class="right">
                  <bean:message key="ep.user.template.colors.color.palette"  bundle="ep.messages"/>
                  </span>
                  </div>
                </td>
              </tr>
              <tr>
                <td id="sectionRule" valign="middle"><c:out value='${editImg}' escapeXml="false"/></td>
              </tr>
              <tr>
                <td>
                  <table class="subLabel" width="100%" border="0" cellspacing="1" cellpadding="0">
                    <tr>				
                      <script language="JavaScript">
                      <!-- 
                      var count = 0;
                      var output = '';

                      for (var r = 0 ; r <= 255; r += 51) {
                        for (var b = 0; b <= 255; b += 51) {
                          for (var g = 0; g <= 255; g += 51) {
                            if (count == 18) {
                              document.write(output + '</tr>\n<tr>');
                              count = 0;
                              output = '';
                            }

                            var col = '#' +
                                      ((r==0) ? '00' : r.toString(16).toUpperCase()) +
                                      ((g==0) ? '00' : g.toString(16).toUpperCase()) +
                                      ((b==0) ? '00' : b.toString(16).toUpperCase());

                            output +=
                                      '<td bgcolor="' + col + '">' +
                                      '<a href="#" onClick="javascript:lockIn=true; updateColor(\''+col+'\')"' +
                                      ' onMouseOver="if(!lockIn) updateColor(\''+col+'\')" onMouseOut="if(!lockIn) updateColor(current)">' +
                                      '<img src="<%= ctxPath %>/ep/images/build/transparent.gif" height="12" width="12" border="0"></a></td>';

                            count++;
                          }
                        }
                      }

                      document.write(output);
                      //-->
                      </script>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>

      <div class="pageButtonWrap" align="right">
      <input type="button" name="actionReset" class="pageButton" 
        value='<bean:message key="button.reset" bundle="ep.messages"/>'
        onclick="doResetAction(this.form)">
      &nbsp;&nbsp;
      <input type="button" name="actionCancel" class="pageButton" 
        onclick="doCancel(this.form);"
        value='<bean:message key="button.cancel" bundle="ep.messages"/>'>
      <input type="submit" name="actionSave" class="pageButton" 
        value='<bean:message key="button.save" bundle="ep.messages"/>'>
      </div>
    </td> 
  </tr>   
</table>

</html:form> 

<script language="JavaScript">
  <!--
  startOver();
  //-->
</script>
